<template>
	<div class="appear">
		<div class="agentcontent">
			<span>{{ $t('ivcs.agentOnCamera') }}</span>
			<RadioGroup v-model="appearAgent" @on-change="selectAppearAgent">
				<Radio label="true">
					<span>{{ $t('ivcs.is') }}</span>
				</Radio>
				<Radio label="false">
					<span>{{ $t('ivcs.not') }}</span>
				</Radio>
			</RadioGroup>
		</div>
		<div class="customercontent">
			<span>{{ $t('ivcs.meOnCamera') }}</span>
			<RadioGroup v-model="appearCustomer" @on-change="selectAppearCustomer">
				<Radio label="true">
					<span>{{ $t('ivcs.is') }}</span>
				</Radio>
				<Radio label="false">
					<span>{{ $t('ivcs.not') }}</span>
				</Radio>
			</RadioGroup>
		</div>
		<div class="toastcontent">
			<img src="../../../static/images/exclame.png" alt="" />
			<span class="toasttext">{{ $t('ivcs.outOfMirror') }}</span>
		</div>
	</div>
</template>

<script>
export default {
	name: 'AppearCamera',
	data() {
		return {
			appearAgent: 'true',
			appearCustomer: 'true'
		};
	},
	methods: {
		// eslint-disable-next-line no-unused-vars
		selectAppearAgent(value) {},
		// eslint-disable-next-line no-unused-vars
		selectAppearCustomer(value) {}
	}
};
</script>

<style scoped>
.appear {
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
}
.appear div {
	display: flex;
	justify-content: left;
	align-items: center;
}
.agentcontent,
.customercontent {
	margin-bottom: 14px;
}
.agentcontent span,
.customercontent span {
	margin-right: 20px;
}
.toasttext {
	font-size: 11px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #c7c7c7;
}
.toastcontent {
	display: flex;
	justify-content: left;
	align-items: center;
}
.toastcontent img {
	width: 12px;
	margin-right: 6px;
}
</style>
